<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <title>8-推荐产品列表UI</title>
</head>

<body>
    <div class="cont">
        <div class="box">
            <h2>入门型</h2>
            <p class="title">适用于个人网站初始阶段并发访问量小，经济配置省钱使用，两步购买方便快捷
            </p>
            <div class="txt">
                <ul>
                    <li>
                        <div class="txtbox">
                            <span class="num">1</span><span class="txt_a">核</span>
                            <br>
                            <span class="txt_b">cpu</span>
                        </div>
                    </li>
                    <li>
                        <div class="txtbox">
                            <span class="num">1</span><span class="txt_a">核</span>
                            <br>
                            <span class="txt_b">cpu</span>
                        </div>
                    </li>
                    <li>
                        <div class="txtbox">
                            <span class="num">1</span><span class="txt_a">核</span>
                            <br>
                            <span class="txt_b">cpu</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="price_box">
                <span class="price">49</span>
                <span class="txt">元/月起</span>
            </div>
            <div class="button_box">立即选购</div>
        </div>

        <div class="box">
            <h2>入门型</h2>
            <p class="title">适用于个人网站初始阶段并发访问量小，经济配置省钱使用，两步购买方便快捷
            </p>
            <div class="txt">
                <ul>
                    <li>
                        <div class="txtbox">
                            <span class="num">1</span><span class="txt_a">核</span>
                            <br>
                            <span class="txt_b">cpu</span>
                        </div>
                    </li>
                    <li>
                        <div class="txtbox">
                            <span class="num">1</span><span class="txt_a">核</span>
                            <br>
                            <span class="txt_b">cpu</span>
                        </div>
                    </li>
                    <li>
                        <div class="txtbox">
                            <span class="num">1</span><span class="txt_a">核</span>
                            <br>
                            <span class="txt_b">cpu</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="price_box">
                <span class="price">49</span>
                <span class="txt">元/月起</span>
            </div>
            <div class="button_box">立即选购</div>
        </div>
        <div class="box">
            <h2>入门型</h2>
            <p class="title">适用于个人网站初始阶段并发访问量小，经济配置省钱使用，两步购买方便快捷
            </p>
            <div class="txt">
                <ul>
                    <li>
                        <div class="txtbox">
                            <span class="num">1</span><span class="txt_a">核</span>
                            <br>
                            <span class="txt_b">cpu</span>
                        </div>
                    </li>
                    <li>
                        <div class="txtbox">
                            <span class="num">1</span><span class="txt_a">核</span>
                            <br>
                            <span class="txt_b">cpu</span>
                        </div>
                    </li>
                    <li>
                        <div class="txtbox">
                            <span class="num">1</span><span class="txt_a">核</span>
                            <br>
                            <span class="txt_b">cpu</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="price_box">
                <span class="price">49</span>
                <span class="txt">元/月起</span>
            </div>
            <div class="button_box">立即选购</div>
        </div>
        <div class="box">
            <h2>入门型</h2>
            <p class="title">适用于个人网站初始阶段并发访问量小，经济配置省钱使用，两步购买方便快捷
            </p>
            <div class="txt">
                <ul>
                    <li>
                        <div class="txtbox">
                            <span class="num">1</span><span class="txt_a">核</span>
                            <br>
                            <span class="txt_b">cpu</span>
                        </div>
                    </li>
                    <li>
                        <div class="txtbox">
                            <span class="num">1</span><span class="txt_a">核</span>
                            <br>
                            <span class="txt_b">cpu</span>
                        </div>
                    </li>
                    <li>
                        <div class="txtbox">
                            <span class="num">1</span><span class="txt_a">核</span>
                            <br>
                            <span class="txt_b">cpu</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="price_box">
                <span class="price">49</span>
                <span class="txt">元/月起</span>
            </div>
            <div class="button_box">立即选购</div>
        </div>
    </div>
</body>

</html>